<template>
    <div class="tenantAuthSearchContainer">
        <span class="inputLabel">租户编码</span>
        <el-select v-model="tenantAuthSearchData.tenantId" placeholder="租户编码" class="searchInfoInput" :loading="tenantSearchLoading" clearable filterable remote :remote-method="tenantDataSearch">
            <el-option :label="item.tenantId" :value="item.tenantId" v-for="item in tenantDataList" :key="item.id"/>
        </el-select>

        <span class="inputLabel">用户账号</span>
        <el-select v-model="tenantAuthSearchData.userId" placeholder="用户账号" class="searchInfoInput" :loading="userSearchLoading" clearable filterable remote :remote-method="userInfoDataSearch">
            <el-option :label="item.userAccount" :value="item.id" v-for="item in userInfoDataList" :key="item.id"/>
        </el-select>

        <el-button type="primary" icon="SearchOutlined" :loading="searchLoading" class="searchButtonClass" @click="queryUserInfo()">搜索</el-button>
        <el-button icon="RedoOutlined" @click="resetInput()">重置</el-button>
    </div>
</template>

<script>
import {tenantAuthInfoQuery, tenantInfoQuery} from "@/request/tenant";
import {userInfoQuery} from "@/request/user";

export default {
    name: "TenantAuthSearch",
    data() {
        return {
            tenantDataList: [],
            userInfoDataList: [],
            searchLoading: false,
            tenantSearchLoading: false,
            userSearchLoading: false
        }
    },
    computed: {
        tenantAuthSearchData() {
            return this.$store.state.tenantAuthSearchData;
        },
        tenantAuthDataList() {
            return this.$store.state.tenantAuthDataList;
        }
    },
    methods: {
        queryUserInfo() {
            this.searchLoading = true
            tenantAuthInfoQuery(this.tenantAuthSearchData).then(res => {
                if (res.code === '200') {
                    this.$store.state.tenantAuthDataList = res.data
                }
                this.searchLoading = false
            }).catch(res => {
                this.searchLoading = false
            })
        },
        resetInput() {
            this.$store.state.tenantAuthSearchData = {
                tenantId: '',
                userId: ''
            }
        },
        userInfoDataSearch(query) {
            this.userSearchLoading = true
            let param = {
                pageInfo: {
                    pageIndex: 1,
                    pageSize: 100
                },
                userAccount: query
            }
            userInfoQuery(param).then(res => {
                this.userInfoDataList = res.data.dataList;
                this.userSearchLoading = false
            }).catch(res => {
                this.userSearchLoading = false
            })
        },
        tenantDataSearch(query) {
            this.tenantSearchLoading = true
            let param = {
                pageInfo: {
                    pageIndex: 1,
                    pageSize: 100
                },
                tenantId: query
            }
            tenantInfoQuery(param).then(res => {
                this.tenantDataList = res.data.dataList;
                this.tenantSearchLoading = false
            }).catch(res => {
                this.tenantSearchLoading = false
            })
        }
    }
}
</script>

<style scoped lang="less">
.tenantAuthSearchContainer {
    width: 100%;
    height: 10%;
    .searchInfoInput {
        width: 15%;
        padding-left: 1%;
    }
    .inputLabel {
        padding-left: 1%;
        font-weight: 700;
        font-size: 15px;
        color: #606266;
    }
    .searchButtonClass {
        margin-left: 1%;
    }
}
</style>